<template>
	<!-- 商城 -->
	<view class="app">
		
		<!-- 内容列表 -->
		<mescroll-body :sticky="true" top="0" down="120" :bottombar="false" @init="mescrollInit" :down="downOption"
			@down="downCallback" :up="upOption" @up="upCallback">
			<!-- 吸顶搜索栏 -->
			<view class="top-bar sticky-tabs">
				<u-icon class="icon" name="arrow-left" color="#eee" size="64"
					@click="vk.navigateBack"></u-icon>
				<view class="search-bar">
					<u-search placeholder="商品搜索" v-model="keyword" :show-action="false" shape="square"></u-search>
				</view>
				<u-icon class="icon" name="list-dot" color="#eee" size="64"
					@click="pageTo('/pages/index/nav')"></u-icon>
			</view>
			
			<!-- 筛选条件 -->
			<zero-filter-bar ref="zeroFilterBar" :dataList="tabs"  @filter='handleFilterItem' @extraClick='showDrawer()'></zero-filter-bar>
			<view class="filter-bar row row-between">
				<view class="tabs-bar">
					<view class="tabs-item" v-for="(item, index) in tabs" :key="index" 
						@click="change(index)"
						:class="index == current ? 'active' : ''">
						{{item.name}}
					</view>
					<view class="tabs-item">排序</view>
				</view>
			</view>
			
			<!-- 数据列表 -->
			<view class="grid-bar">
				<view class="grid-item2 grid-text-item" v-for="(item, index) in dataList" :key="index"
					@click="toDetail(item.id)">
					<text class="price">￥{{item.price.toFixed(2)}}</text>
					<text class="text2 common-text">{{item.supplier}}</text>
					<text class="text common-text-row2">{{item.content}}</text>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import GOODS from "@/data/goods.js";
	import GOODS_CATEGORY from "@/data/goodsCategory.js";

	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import zero-filter-bar from "@/uni_modules/zero-filter-bar/components/zero-filter-bar/zero-filter-bar.vue";

	export default {
		mixins: [MescrollMixin], // 下拉刷新和上拉加载的组件
		data() {
			return {
				disabled: false,
				loading: false,
				
				keyword: '', // 关键字
				
				// 筛选条件
				tabs: [{
					id: 1,
					name: '综合'
				}, {
					id: 2,
					name: '销量'
				}, {
					id: 3,
					name: '评论'
				}, {
					id: 4,
					name: '价格',
					sort: true,
					// orderBy: '0', // 排序 默认0。 0升序 1降序
				}],
				current: 0,
				
				dataList: [],

				downOption: {
					auto: false, //是否在初始化后,自动执行上拉回调callback; 默认true					
				},
				upOption: {
					auto: false, //是否在初始化后,自动执行上拉回调callback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 12 // 每页数据的数量
					},
					noMoreSize: 8, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					textNoMore: '没有更多数据',
					empty: {
						tip: '~ 搜索无结果 ~', // 提示
						btnText: ''
					}
				},
			}
		},
		onLoad(options = {}) {
			this.initPage(options);
		},
		onShow() {
			// #ifdef H5
			this.$nextTick(() => {
				// #endif
				this.mescroll && this.mescroll.resetUpScroll();
				// #ifdef H5
			})
			// #endif
		},
		methods: {
			handleFilterItem(index,desc,item){
				console.log(index,desc,item)
			},

			handleFilterExtra() {
				// #ifdef H5
				this.$nextTick(() => {
					// #endif
					// 确认自定义筛选事件后，高亮右侧按钮
					this.$refs.zeroFilterBar.setCurrentExtraOn()
					this.closeDrawer();
					// #ifdef H5
				})
				// #endif
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			
			change(index) {
				console.log('点击了tab', index)
				this.current = index;
			},
			initPage(options = {}) {

			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			refresh() {
				this.mescroll.resetUpScroll();
			},
			toAdd() {
				vk.navigateTo({
					url: './detail?action=add',
					events: {
						refresh: () => {
							this.refresh();
						}
					}
				})
			},
			toDetail(id) {
				this.pageTo(`./detail?id=${id}&action=edit`)
			},
			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			// 底部上划，获取列表
			upCallback(page) {
				// 模拟1秒
				setTimeout(() => {
					let list = GOODS;

					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(list); //追加新数据

					if(config.debug) console.log('从业人员列表', this.dataList)

					//方法二(推荐): 当前页数据长度curPageLen, 后台接口有返回列表的总数据量 totalSize
					this.mescroll.endBySize(list.length, GOODS.length);
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sticky-tabs{
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}
	
	.tabs-bar{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background-color: #fff;
	}
	.tabs-item{
		padding: 0 30rpx;
	}
	.tabs-item:last-child{
		margin-left: auto;
	}
	.active{
		color: red;
	}
	
</style>